<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- <link rel="stylesheet" href="unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css"> -->
	</head>
	<style>
		.el-row {
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.el-col {
			border-radius: 4px;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.grid-content {
			border-radius: 4px;
			min-height: 36px;
		}

		.row-bg {
			padding: 10px 0;
			background-color: #f9fafc;
		}
	</style>
	<body>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.13.1/lib/index.js"></script>
		<div id="app">
			<h2>基础布局</h2>
			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<h2>分栏间隔</h2>
			<el-row :gutter="20">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<h2>混合布局</h2>
			<el-row :gutter="20">
			  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			
			<h2>分栏偏移</h2>
			<el-row :gutter="20">
			  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
			<el-row :gutter="20">
			  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
			</el-row>
		</div>
	</body>
	<script>
		new Vue().$mount('#app')
	</script>
</html>
